<template>
  <!-- 我的 -->
  <div class="mine">
    <div class="mine-center" :style="{ paddingTop: capsuleTop + 'px' }">
      <div class="mine-top">
        <img :src="userInfo.headImgUrl ? userInfo.headImgUrl : '../static/imgs/touxiang.png'" alt="">
        <div class="mine-top-left">{{ userInfo.customerName || '请设置名称' }}</div>
        <!-- 根据登录状态显示不同按钮 -->
        <div
          v-if="!userInfo.customerId"
          @click="handleGotoLogin"
          class="mine-top-right login-btn"
        >
          登录
        </div>
        <div
          v-else
          @click="handleGotoSet"
          class="mine-top-right"
        >
          账户设置
        </div>
      </div>
      <!-- <div class="mine-header">
        <div class="mine-header-left" @click="navTo('/pages/TakeoutOrder')">
          <img src="../static/imgs/mine/waimaidingdan.png" alt="">
          <div>外卖订单</div>
        </div>
        <div class="mine-header-right" @click="handleGoDeliveryOrder" v-if="userInfo.roleTypeId==2">
          <img src="../static/imgs/mine/peisongdingdan.png" alt="">
          <div>配送订单</div>
        </div>
      </div> -->


      <template v-for="item in filteredMineBoxItemList" :key="item.title">
        <div class=mine-box-item>
          <div class="mine-box-item-title">{{ item.title }}</div>
          <div class="mine-box-item-content">
            <template v-for="item in item.list" :key="item.title">
              <div class="mine-box-item-content-item" @click="handlerMenu(item)">
                <img :src="item.icon" alt="">
                <div>{{ item.title }}</div>
                <wd-button class="btn" v-if="item.title == '在线客服'" type="primary" size="large" block
                  open-type="contact">微信在线客服 </wd-button>
              </div>
            </template>
          </div>
        </div>
      </template>

    </div>
    <!-- 底部导航 -->
    <bottomNav @change="onTabChange" />
    <!-- 店铺选择弹出层 -->
    <wd-popup v-model="showShopPopup" position="bottom">
      <view class="shop-popup">
        <view class="shop-popup-title">选择店铺</view>
        <view class="shop-list">
          <view v-for="(shop, idx) in myShopList" :key="idx" class="shop-item" @click="selectShop(shop)">
            <image :src="shop.logo || '../static/imgs/NoPath.png'" class="shop-logo"></image>
            <view class="shop-info">
              <view class="shop-name">{{ shop.shopName }}</view>
              <view class="shop-type">{{ shop.shopType }}</view>
            </view>
            <wd-icon name="arrow-right" size="16px" color="#666"></wd-icon>
          </view>
        </view>
        <view class="close-btn" @click="showShopPopup = false">取消</view>
      </view>
    </wd-popup>
    <!-- 设备列表弹出层 -->
    <wd-popup v-model="showDevicePopup" position="bottom">
      <view class="device-popup">
        <view class="device-popup-title">已绑定设备</view>
        <view class="device-list" v-if="deviceList.length > 0">
          <view v-for="(device, idx) in deviceList" :key="idx" class="device-item">
            <view class="device-info">
              <view class="device-name">设备名称: {{ device.name || device.sn || '未知设备' }}</view>
              <view class="device-sn">设备编号: {{ device.sn }}</view>
              <!-- <view class="device-status" :class="{ 'online': device.status === 1, 'offline': device.status !== 1 }">
                状态: {{ device.status === 1 ? '在线' : '离线' }}
              </view> -->
            </view>
            <view class="device-actions">
              <button size="small" type="error" @click="unbindDevice(device)">解绑</button>
            </view>
          </view>
        </view>
        <view class="empty-device" v-else>
          <text>暂无绑定设备</text>
        </view>
        <view class="device-popup-actions">
          <button type="primary" @click="startScanCode" block>绑定新设备</button>
          <view class="close-btn" @click="showDevicePopup = false">关闭</view>
        </view>
      </view>
    </wd-popup>

    <!-- 商家申请弹出层 -->
    <wd-popup v-model="showShopApplyPopup" position="center" :close-on-click-overlay="false">
      <view class="shop-apply-popup">
        <view class="shop-apply-popup-header">
          <view class="shop-apply-popup-title">商家申请</view>
          <view class="shop-apply-popup-subtitle">请填写以下信息，我们将在3个工作日内与您联系</view>
        </view>

        <view class="shop-apply-form">
          <view class="form-item">
            <view class="form-label">姓名 <span class="required">*</span></view>
            <wd-input v-model="shopApplyForm.customerName" placeholder="请输入姓名" class="form-input" />
          </view>

          <view class="form-item">
            <view class="form-label">联系方式 <span class="required">*</span></view>
            <wd-input v-model="shopApplyForm.phone" placeholder="请输入手机号码" class="form-input" type="number" />
          </view>

          <view class="form-item">
            <view class="form-label">店名 <span class="required">*</span></view>
            <wd-input v-model="shopApplyForm.shopName" placeholder="请输入店名" class="form-input" />
          </view>

          <view class="form-item">
            <view class="form-label">店铺类型 <span class="required">*</span></view>
            <picker :value="shopTypeIndex" :range="classificationList" range-key="shopCategoryName"
              @change="shopCategoryName" class="form-picker">
              <view class="picker-display">
                <text v-if="shopApplyForm.shopType" class="picker-text">{{ shopApplyForm.shopType }}</text>
                <text v-else class="picker-placeholder">请选择店铺类型</text>
                <wd-icon name="arrow-down" size="16px" color="#999"></wd-icon>
              </view>
            </picker>
          </view>
        </view>

        <view class="shop-apply-actions">
          <button type="default" @click="cancelShopApply" class="cancel-btn">取消</button>
          <button type="primary" @click="submitShopApply" class="submit-btn">提交申请</button>
        </view>
      </view>
    </wd-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import bottomNav from '@/components/bottomNav.vue'
import { useBottomNavStore } from '@/stores/bottomNav'
const bottomNavStore = useBottomNavStore()
// 获取用户数据
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

// 直接使用 store 中的响应式数据
const userInfo = ref({})

const capsuleTop = ref(0)

const mineBoxItemList = ref([
  {
    title: '我的服务',
    list: [
      {
        icon: '../static/imgs/mine/wodedizhi.png',
        title: '我的地址',
        type: 'goto',
        path: '/pages-shift/Address',
      },
      {
        icon: '../static/imgs/mine/wodeshouzang.png',
        title: '我的收藏',
        type: 'goto',
        path: '/pages/collect',
      },
      // {
      //   icon: '../static/imgs/mine/shangjiashoukuan.png',
      //   title: '商家提现',
      //   type: 'goto',
      //   path: '/pages/WithdrawCash',
      //   roleTypeId: 2,
      // },
      {
        icon: '../static/imgs/mine/wodedizhi.png',
        title: '骑手提现',
        type: 'goto',
        path: '/pages/WithdrawCash',
        roleTypeId: 1,
      },
      // {
      //   icon: '../static/imgs/mine/wodedizhi.png',
      //   title: '退款订单',
      //   type: 'goto',
      //   path: `/pages/RefundApproval`,
      // },
      {
        icon: '../static/imgs/mine/wodedizhi.png',
        title: '设备绑定',
        type: 'Binding',
        path: `/pages/RefundApproval`,
        roleTypeId: 2,
      },
    ],
  },
  {
    title: '推荐服务',
    list: [
      {
        icon: '../static/imgs/mine/qishoushengqin.png',
        title: '骑手申请',
        type: 'fn',
        path: '/pages/Mine/MyAddress',
      },
      {
        icon: '../static/imgs/mine/qishoushengqin.png',
        title: '商家申请',
        type: 'shopFn',
        path: '/pages/Mine/MyAddress',
      },
    ],
  },
  {
    title: '系统服务',
    list: [
      {
        icon: '../static/imgs/mine/zaixiankefu.png',
        title: '在线客服',
        type: 'goto',
        path: '/pages/Mine/MyAddress',
      },
      // {
      //   icon: '../static/imgs/mine/shoukuanzhanghu.png',
      //   title: '收款账户',
      //   type: 'goto',
      //   path: '/pages/Collection',
      // },
      {
        icon: '../static/imgs/mine/toushufankui.png',
        title: '意见反馈',
        type: 'goto',
        path: '/pages/Feedback',
      },
      {
        icon: '../static/imgs/mine/shezhi.png',
        title: '设置',
        type: 'goto',
        path: '/pages/Settings',
      },
    ],
  },
])

// 过滤各项，只有满足角色要求的才展示
const filteredMineBoxItemList = computed(() => {
  const role = Number(userInfo.value?.roleTypeId)
  console.log(role, 'role');

  return mineBoxItemList.value
    .map(section => ({
      ...section,
      list: section.list.filter(it => !('roleTypeId' in it) || Number(it.roleTypeId) === role),
    }))
    .filter(section => section.list.length > 0)
})

// 使用 ref 创建本地变量存储店铺列表
const myShopList = ref([])
// 控制弹出层显示
const showShopPopup = ref(false)

// 添加设备相关的变量
const deviceList = ref([])
// 控制设备弹出层显示
const showDevicePopup = ref(false)

// 商家申请相关状态
const showShopApplyPopup = ref(false)
const shopApplyForm = ref({
  customerName: '',
  phone: '',
  shopName: '',
  shopType: ''
})

// 店铺类型选项和索引
const shopTypeIndex = ref(0)

onLoad(() => {
  //
  console.log(userInfo, 'userInfo____________________________________');

  const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
  capsuleTop.value = menuButtonInfo.bottom + 20


})
const shopId = ref('')
onMounted(() => {
  // 从本地缓存获取数据
  try {
    const cachedData = uni.getStorageSync('my-shop-list-cache')
    if (cachedData) {
      myShopList.value = JSON.parse(cachedData)
      if (myShopList.value.length > 0) {
        shopId.value = myShopList.value[0].shopId
      }
      console.log('bottomNav: 从缓存加载店铺数据成功', myShopList.value)
    } else {
      console.log('bottomNav: 缓存中没有店铺数据')
      // 如果缓存中没有数据，尝试使用 store 中的数据
      if (userStore.myShopList && userStore.myShopList.length > 0) {
        myShopList.value = userStore.myShopList
      }
    }
  } catch (error) {
    console.error('bottomNav: 读取缓存数据失败', error)
  }
})
const bottomNavIndex = ref(4)
const onTabChange = (index) => {
  console.log('切换到索引:', index)
  bottomNavIndex.value = index
}
onShow(() => {
  console.log(userInfo.value, '____________________');
  if (userInfo.value.roleTypeId == 2) {
    // 商家
    bottomNavStore.setActiveIndex(4)
  } else if (userInfo.value.roleTypeId == 1) {
    // 骑手
    bottomNavStore.setActiveIndex(4)
  } else {
    bottomNavStore.setActiveIndex(3)
  }

  // 每次显示页面时也更新用户信息
  getUserInfo()
  getShopClassList()
})

// 添加获取用户信息的方法
const getUserInfo = async () => {
  try {
    // 调用store中的方法更新用户信息
    await userStore.updateUserInfo().then(res => {
      console.log(res, 'res111111');

    })
    console.log('用户信息更新成功:', userStore.customerInfo)
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

watch(
  () => userStore.customerInfo,
  (newVal) => {
    userInfo.value = newVal
  },
  {
    immediate: true,
    deep: true,
  },
)

onMounted(() => {
  userInfo.value = userStore.customerInfo
})
const selectShop = (shop) => {
  showShopPopup.value = false
  uni.navigateTo({
    url: `/pages-shift/ShopDeliveryOrder?shopId=${shop.shopId}`,
  })
}
const classificationList = ref([])
// 获取店铺分类列表
const getShopClassList = async () => {
  const res = await Fetch('shopping/ShopCategory/list', {
    method: 'get',
  })
  if (res.data.code === 200) {
    const list = res.data.rows
    classificationList.value = list
    console.log('店铺分类列表:', list) // 添加这行来查看数据结构
  } else {
    uni.showToast({
      title: res.data.msg,
      icon: 'none'
    })
  }
}
// 相关菜单点击事件
const handlerMenu = async (item) => {
  console.log(item, 'item');
  const result = await Fetch(`shopping/login/getUserInfo`)
  if (result.data.code === 200) {
    if (item.type == 'goto') {
      navTo(`${item.path}?shopId=${shopId.value}`)
    } else if (item.type == 'fn') {
      handleRiderApply()
    } else if (item.type == 'shopFn') {
      handleShopApply()
    } else if (item.type == 'Binding') {
      console.log(userInfo.value.roleTypeId, 'userInfo.value.roleTypeI');

      if (userInfo.value.roleTypeId == 2) {
        handleBinding()
      } else {
        uni.showToast({
          title: '不是商家，无法绑定设备',
          icon: 'none',
        });
      }
    }
  } else {
    uni.showModal({
      title: '提示',
      content: '您尚未登录，请先登录',
      showCancel: true,
      success: function (res) {
        if (res.confirm) {
          // 返回登录页
          uni.reLaunch({
            url: '/pages/login'
          });
        }
      }
    });
  }


}

// 骑手申请
const handleRiderApply = async () => {
  if (userInfo.value.roleTypeId == 1) {
    uni.showToast({
      title: '您已经是骑手，无需重复申请',
      icon: 'none',
    });
    return
  }
  // 检查用户是否添加了手机号码
  if (!userInfo.value.phone || userInfo.value.phone.trim() === '') {
    uni.showModal({
      title: '提示',
      content: '请先添加手机号码后再申请骑手',
      confirmText: '去设置',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 跳转到账户设置页面
          navTo('/pages/AccountSettings')
        }
      }
    })
    return
  }


  let extendsJson = {
    six: userInfo.value.six,
  }
  let formData = {
    applicationType: 1, // 申请类型 1:骑手 2:申请提现
    customerId: userInfo.value.customerId,
    customerName: userInfo.value.customerName,
    phone: userInfo.value.phone,
    extendsJson: JSON.stringify(extendsJson),
  }
  const res = await Fetch('shopping/application/add', {
    method: 'POST',
    data: formData,
  })
  if (res.data.code == 200) {
    uni.showModal({
      title: '申请成功',
      content: '请等待工作人员联系',
      showCancel: false,
      confirmText: '确定',
    })
  } else {
    uni.showToast({
      title: res?.data?.msg || '',
      icon: 'none',
    })
  }
  console.log(res, 'res');
}


// 商家申请
const handleShopApply = async () => {
  console.log('开始商家申请');

  // 检查用户是否添加了手机号码
  if (!userInfo.value.phone || userInfo.value.phone.trim() === '') {
    uni.showModal({
      title: '提示',
      content: '请先添加手机号码后再申请商家',
      confirmText: '去设置',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 跳转到账户设置页面
          navTo('/pages/AccountSettings')
        }
      }
    })
    return
  }

  // 预填充表单数据
  shopApplyForm.value.customerName = userInfo.value.customerName || ''
  shopApplyForm.value.phone = userInfo.value.phone || ''
  shopApplyForm.value.shopName = ''
  shopApplyForm.value.shopType = ''
  shopTypeIndex.value = 0

  // 显示申请弹窗
  showShopApplyPopup.value = true
}

// 取消商家申请
const cancelShopApply = () => {
  showShopApplyPopup.value = false
  // 清空表单
  shopApplyForm.value = {
    customerName: '',
    phone: '',
    shopName: '',
    shopType: ''
  }
  shopTypeIndex.value = 0
}

// 提交商家申请
const submitShopApply = async () => {
  // 表单验证
  if (!shopApplyForm.value.customerName.trim()) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return
  }

  if (!shopApplyForm.value.phone.trim()) {
    uni.showToast({
      title: '请输入联系方式',
      icon: 'none'
    })
    return
  }

  if (!shopApplyForm.value.shopName.trim()) {
    uni.showToast({
      title: '请输入店名',
      icon: 'none'
    })
    return
  }

  if (!shopApplyForm.value.shopType) {
    uni.showToast({
      title: '请选择店铺类型',
      icon: 'none'
    })
    return
  }

  try {
    // 显示加载提示
    uni.showLoading({
      title: '提交中...'
    })

    // 构建申请数据
    let extendsJson = {
      shopName: shopApplyForm.value.shopName,
      shopType: shopApplyForm.value.shopType
    }

    let formData = {
      applicationType: 3, // 申请类型 1:骑手 2:商家
      customerId: userInfo.value.customerId,
      customerName: shopApplyForm.value.customerName,
      phone: shopApplyForm.value.phone,
      extendsJson: JSON.stringify(extendsJson),
    }

    // 调用申请接口
    const res = await Fetch('shopping/application/add', {
      method: 'POST',
      data: formData,
    })

    // 隐藏加载提示
    uni.hideLoading()

    if (res.data.code == 200) {
      uni.showModal({
        title: '申请成功',
        content: '请等待工作人员联系',
        showCancel: false,
        confirmText: '确定',
        success: () => {
          // 关闭弹窗
          showShopApplyPopup.value = false
          // 清空表单
          cancelShopApply()
        }
      })
    } else {
      uni.showToast({
        title: res?.data?.msg || '申请失败',
        icon: 'none',
      })
    }
  } catch (error) {
    // 隐藏加载提示
    uni.hideLoading()
    console.error('商家申请失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none',
    })
  }
}

const handleBinding = async () => {
  console.log('开始设备绑定');

  try {
    // 先查询是否已经绑定了设备
    await checkExistingDevices();
  } catch (error) {
    console.error('查询设备或绑定过程出错:', error);

    // 处理用户取消的情况
    if (error.errMsg && error.errMsg.includes('cancel')) {
      console.log('用户取消操作');
      return;
    }

    // 其他错误情况
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none',
      duration: 2000
    });
  }
}

// 查询已绑定的设备
const checkExistingDevices = async () => {
  try {
    const res = await Fetch('shopping/printer/list', {
      method: 'GET',
      data: {
        shopId: shopId.value
      }
    });

    console.log(res, '查询设备列表返回');

    if (res.data.code === 200 && res.data.rows && res.data.rows.length > 0) {
      // 有已绑定的设备，弹出选择对话框
      showDeviceActionDialog();
    } else {
      // 没有绑定设备，直接进入扫码流程
      startScanCode();
    }
  } catch (error) {
    console.error('查询设备列表失败:', error);
    // 查询失败时也允许用户扫码绑定新设备
    startScanCode();
  }
}

// 显示设备操作选择对话框
const showDeviceActionDialog = () => {
  uni.showActionSheet({
    itemList: ['查看已绑定设备', '扫码绑定新设备'],
    success: function (res) {
      console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
      if (res.tapIndex === 0) {
        // 查看已绑定设备
        viewBoundDevices();
      } else if (res.tapIndex === 1) {
        // 扫码绑定新设备
        startScanCode();
      }
    },
    fail: function (res) {
      console.log('用户取消选择');
    }
  });
}

// 查看已绑定的设备
const viewBoundDevices = async () => {
  try {
    const res = await Fetch('shopping/printer/list', {
      method: 'GET',
      data: {
        shopId: shopId.value
      }
    });

    if (res.data.code === 200 && res.data.rows) {
      deviceList.value = res.data.rows
      showDevicePopup.value = true
    } else {
      uni.showToast({
        title: '获取设备列表失败',
        icon: 'none',
      });
    }
  } catch (error) {
    console.error('获取设备列表失败:', error);
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none',
    });
  }
}

// 解绑设备
const unbindDevice = (device) => {
  uni.showModal({
    title: '确认解绑',
    content: `确定要解绑设备 ${device.deviceName || device.sn} 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await Fetch(`shopping/printer/${device.printerId}`, {
            method: 'DELETE'
          });

          if (result.data.code === 200) {
            uni.showToast({
              title: '解绑成功',
              icon: 'success',
            });
            // 重新获取设备列表
            viewBoundDevices();
          } else {
            uni.showToast({
              title: result.data.msg || '解绑失败',
              icon: 'none',
            });
          }
        } catch (error) {
          console.error('解绑设备失败:', error);
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none',
          });
        }
      }
    }
  });
}

// 开始扫码流程
const startScanCode = () => {
  // 只允许通过相机扫码
  uni.scanCode({
    onlyFromCamera: true,
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
      if (res.result) {
        bindDevice(res.result)
      } else {
        uni.showToast({
          title: '扫码失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    fail: (err) => {
      console.log('扫码失败:', err);
    },
  });
}

// 设备绑定接口调用函数
const bindDevice = async (deviceCode) => {
  try {
    const parts = deviceCode.split(':')
    const params = {
      pkey: parts[1],
      sn: parts[0],
      shopId: shopId.value
    }
    console.log(params, 'params设备绑定的参数');

    const res = await Fetch('shopping/printer/add', {
      method: 'POST',
      data: params
    });
    console.log(res, '扫码设备添加接口返回');

    if (res.data.code === 200) {
      console.log('设备绑定成功');
      uni.showToast({
        title: '设备绑定成功',
        icon: 'success',
      });
    } else {
      console.log(res.data.msg);

      uni.showToast({
        title: res.data.msg || '接口出错，请联系管理员',
        icon: 'none',
      });
    }
  } catch (error) {
    console.error('设备绑定接口调用失败:', error);
    return {
      success: false,
      message: '网络错误，请重试'
    };
  }
}

const handleGotoSet = async () => {
  const result = await Fetch(`shopping/login/getUserInfo`)
  if (result.data.code === 200) {
    navTo('/pages/AccountSettings')
  } else {
    uni.showModal({
      title: '提示',
      content: '您尚未登录，请先登录',
      showCancel: true,
      success: function (res) {
        if (res.confirm) {
          // 返回登录页
          uni.reLaunch({
            url: '/pages/login'
          });
        }
      }
    });
  }
}

const handleGotoLogin = () => {
  uni.reLaunch({
    url: '/pages/login'
  });
}

const handleGoDeliveryOrder = () => {
  if (userInfo.value.roleTypeId == 2) {
    // 进入商家订单页面
    showShopPopup.value = true
    // navTo('/pages/ShopDeliveryOrder')
  }
  // else {
  //   navTo('/pages/DeliveryOrder')
  // }
}

// 店铺类型选择变化处理
const shopCategoryName = (e) => {
  const index = e.detail.value
  shopTypeIndex.value = index
  const selectedCategory = classificationList.value[index]
  console.log('选中的分类:', selectedCategory) // 添加这行来调试

  if (selectedCategory) {
    // 根据实际数据结构调整字段名
    shopApplyForm.value.shopType = selectedCategory.shopCategoryName
  }
}
</script>

<style lang="scss" scoped>
.mine {
  height: 100vh;
  padding: 0 24rpx;
  background: #F5F5F5;

  .mine-center {
    .mine-top {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      image {
        width: 116rpx;
        height: 116rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .mine-top-left {
        font-weight: bold;
        font-size: 36rpx;
        color: #191919;
        line-height: 50rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: auto;
      }

      .mine-top-right {
        width: 132rpx;
        height: 52rpx;
        background: #F5F5F5;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        border: 2rpx solid #CCCCCC;
        font-size: 22rpx;
        color: #191919;
        text-align: center;
        line-height: 52rpx;
      }
    }

    .mine-header {
      margin-top: 40rpx;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .mine-header-left,
      .mine-header-right {
        width: 342rpx;
        height: 108rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 52rpx;
          height: 41rpx;
          margin-right: 38rpx;
        }

        view {
          font-weight: bold;
          font-size: 28rpx;
          color: #191919;
          line-height: 40rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .mine-box-item {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 20rpx;

      .mine-box-item-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #191919;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        padding: 24rpx 0 0 24rpx;
        margin-bottom: 34rpx;
      }

      .mine-box-item-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .mine-box-item-content-item {
          width: 25%;
          font-size: 24rpx;
          color: #191919;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 20rpx;
          position: relative;

        }

        image {
          width: 46rpx;
          height: 46rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}

:deep(.wd-button) {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  width: 100%;
  background: transparent !important;
}

.btn {}

/* 店铺选择弹出层样式 */
.shop-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;

  .shop-popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 10rpx;
  }

  .shop-list {
    max-height: 60vh;
    overflow-y: auto;

    .shop-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1px solid #f5f5f5;

      .shop-logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        margin-right: 20rpx;
      }

      .shop-info {
        flex: 1;

        .shop-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 8rpx;
        }

        .shop-type {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .close-btn {
    margin-top: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #f5f5f5;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #666;
  }
}

/* 设备列表弹出层样式 */
.device-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;

  .device-popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 20rpx;
    color: #191919;
  }

  .device-list {
    max-height: 60vh;
    overflow-y: auto;

    .device-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .device-info {
        flex: 1;

        .device-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #191919;
          margin-bottom: 8rpx;
          line-height: 40rpx;
        }

        .device-sn {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
          line-height: 34rpx;
        }

        .device-status {
          font-size: 24rpx;
          line-height: 34rpx;

          &.online {
            color: #07c160;
          }

          &.offline {
            color: #ee0a24;
          }
        }
      }

      .device-actions {
        margin-left: 20rpx;

        button {
          width: 100rpx;
          height: 52rpx;
          background: #ee0a24;
          border-radius: 26rpx;
          border: none;
          font-size: 22rpx;
          color: #fff;
          text-align: center;
          line-height: 52rpx;
        }
      }
    }
  }

  .empty-device {
    text-align: center;
    padding: 60rpx 0;
    color: #999;
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .device-popup-actions {
    margin-top: 30rpx;

    button {
      width: 100%;
      height: 80rpx;
      background: #07c160;
      border-radius: 40rpx;
      border: none;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      line-height: 80rpx;
      margin-bottom: 20rpx;
    }

    .close-btn {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #f5f5f5;
      border-radius: 40rpx;
      font-size: 28rpx;
      color: #666;
    }
  }
}

/* 商家申请弹出层样式 */
.shop-apply-popup {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 600rpx;
  max-width: 90vw;

  .shop-apply-popup-header {
    text-align: center;
    margin-bottom: 30rpx;

    .shop-apply-popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #191919;
      margin-bottom: 10rpx;
    }

    .shop-apply-popup-subtitle {
      font-size: 24rpx;
      color: #999;
      line-height: 34rpx;
    }
  }

  .shop-apply-form {
    margin-bottom: 40rpx;

    .form-item {
      margin-bottom: 24rpx;

      .form-label {
        font-size: 28rpx;
        color: #191919;
        margin-bottom: 12rpx;
        font-weight: 500;

        .required {
          color: #ee0a24;
          margin-left: 4rpx;
        }
      }

      .form-input {
        width: 100%;
        height: 80rpx;
        border: 1px solid #e5e5e5;
        border-radius: 12rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        background: #fafafa;

        &:focus {
          border-color: #07c160;
          background: #fff;
        }
      }

      .form-picker {
        width: 100%;
        height: 80rpx;
        border: 1px solid #e5e5e5;
        border-radius: 12rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        background: #fafafa;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;

        &:focus {
          border-color: #07c160;
          background: #fff;
        }

        .picker-display {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 500rpx;
          flex: 1;


          .picker-text {
            color: #191919;
            font-size: 28rpx;
            font-weight: 500;
            margin-right: 10rpx;
          }

          .picker-placeholder {
            color: #999;
            font-size: 28rpx;
          }
        }
      }
    }
  }

  .shop-apply-actions {
    display: flex;
    gap: 20rpx;

    .cancel-btn {
      flex: 1;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 40rpx;
      border: none;
      font-size: 28rpx;
      color: #666;
      text-align: center;
      line-height: 80rpx;
    }

    .submit-btn {
      flex: 1;
      height: 80rpx;
      background: #07c160;
      border-radius: 40rpx;
      border: none;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      line-height: 80rpx;
    }
  }
}
</style>
